<template>
  <!-- 引入container布局 -->
    <el-container class="home-container">
        <!-- 头部 -->
  <el-header> 
      <div>
          <img src="../assets/logo.png" alt/>
          <span>电商管理平台</span>
      </div>
        <el-menu
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1" @click="personal">
            <svg class="icon" aria-hidden="true"> 
            <use xlink:href="#icon-gerenxinxi"></use>
            </svg>
            个人信息</el-menu-item>
        <el-menu-item index="2" @click="shop">
            <svg class="icon" aria-hidden="true"> 
            <use xlink:href="#icon-dianpu"></use>
            </svg>
            店铺信息</el-menu-item>
        <el-menu-item index="3" @click="follow">
            <svg class="icon" aria-hidden="true"> 
            <use xlink:href="#icon-wodeguanzhu"></use>
            </svg>
            关注用户情况</el-menu-item>
        </el-menu>
        <el-button type="info" @click="logout" style="position: absolute;right:10px;">安全退出</el-button>
    </el-header>
     <!-- 侧边栏 -->
    <el-container>
    <el-aside width="190px">
        <el-row class="tac" style="height: 100%">
        <el-col style="height: 100%">
        <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            style="height: 100%"    >
            <el-menu-item index="1" @click="home">
                <svg class="icon" aria-hidden="true"> 
                <use xlink:href="#icon-shouye_huaban1"></use>
                </svg>
                <span slot="title" >首页</span>
            </el-menu-item>
            <el-menu-item index="2" @click="order">
                <svg class="icon" aria-hidden="true"> 
                <use xlink:href="#icon-dingdan"></use>
                </svg>
                <span slot="title" >订单处理中心</span>
            </el-menu-item>
             <el-menu-item index="3" @click="shopManage">
                <svg class="icon" aria-hidden="true"> 
                <use xlink:href="#icon-shangpin1"></use>
                </svg>
                <span slot="title" >商品管理</span>
            </el-menu-item>
            </el-menu>
        </el-col>
        </el-row> 
        </el-aside>
        <!-- Main区域 -->
      <el-container>
      <el-main width="-100px">
          <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">电商管理平台</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
          </el-breadcrumb>
          <template>
        <template>
        <el-button type="primary" round style="position: absolute;right:10px;"  @click="dialogFormVisible=true">上架商品</el-button>
            <el-dialog title="上架商品" :visible.sync="dialogFormVisible">
            <el-form :model="form" v-if="active==1">
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" :label-width="formLabelWidth">
                <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品尺码" :label-width="formLabelWidth">
                <el-input v-model="form.size" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品颜色" :label-width="formLabelWidth">
                <el-input v-model="form.color" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品数量" :label-width="formLabelWidth">
                <el-input v-model="form.count" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品描述" :label-width="formLabelWidth">
                <el-input v-model="form.desc" autocomplete="off"></el-input>
                </el-form-item>
                <el-steps :active="active" finish-status="success">
                <el-step title="步骤 1" icon="el-icon-edit"></el-step>
                <el-step title="步骤 2" icon="el-icon-picture"></el-step>
                </el-steps>
                <el-button style="margin-top: 12px;" @click="next" v-if="active==1">下一步</el-button>
            </el-form>
            <el-upload
                name="file"
                class="upload-demo"
                drag
                action="http://localhost:9091/uploadImage"
                multiple v-if="active==2">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
                </el-upload>
            <div slot="footer" class="dialog-footer" v-if="active==2">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addShop">确 定</el-button>
            </div>
            </el-dialog>
        <el-table
            :data="goods"
            style="width:100%; height:50% overflow:auto" border stripe max-height="580">
            <el-table-column
                label="商品ID"
                width="190">
                <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="商品名称"
                width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                    <p>商品描述: {{ scope.row.desc }}</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.goodsName }}</el-tag>
                    </div>
                    </el-popover>
                </template>
                </el-table-column>
            <el-table-column
                label="商品价格"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.price }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="商品尺码"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.size }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="商品颜色"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.color }}</span>
                </template>
            </el-table-column> 
            <el-table-column
                label="商品数量"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.goodsCount }}</span>
                </template>
            </el-table-column>   
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">下架商品</el-button>
                </template>
                </el-table-column>
        </el-table>
        </template>
        </template>
      </el-main>
      </el-container>
  </el-container>
</el-container>
</template>
<script>
export default{
     data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        goods:[],
        active: 1,
        dialogFormVisible: false,
         formLabelWidth: '120px',
         form: {
          name: '',
          price: '',
          size: '',
          color: '',
          count: '',         
          desc: '',
        },
      }
    },
    inject :['reload'],   //注入reload方法，刷新界面
    created(){
        this.getShopList();
    },
    methods:{
        // 下一步   添加商品
        next() {
        if (this.active++ > 2) this.active = 1;
          const params={
                  goodsName:this.form.name,
                  price:this.form.price,
                  size:this.form.size,
                  color:this.form.color,
                  goodsCount:this.form.count,
                  desc:this.form.desc,
                };
             this.$http.post('insertExImage',params)
        },
        addShop(){
            this.$message(
                      {
                        type: 'success',
                        message:'上架成功'
                      }
                    )
                    this.dialogFormVisible = false;
                    this.reload();
        },
        // 安全退出
        logout(){
            window.sessionStorage.clear();  //清楚session
            this.$router.push("/login");    //回到首页
        },
        handleSelect(key, keyPath) {
        console.log(key, keyPath);      // 顶部栏
      },
       handleOpen(key, keyPath) {     // 侧边栏
        console.log(key, keyPath);
      },
       handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleDelete(index,row) {
        console.log(row.id);
        const params={
                  id:row.id,
                };
        this.$confirm('此操作将下架该商品，是否继续？','提示',{
            distinguishCancelAndClose: true,
                confirmButtonText:'确定',
                cancelButtonText:'取消',
            }). then(() => {
            this.$http.post('deleteGoods',params).then(
                res=>{
                  if(res.data.flag === 'ok'){
                    this.$message(
                      {
                        type: 'success',
                        message:'下架成功'
                      }
                    )
                    this.reload();
                    this.dialogFormVisible = false
                  }else{
                    this.$message(
                      {
                        message:'下架失败，请刷新重试'
                      }
                    )
                  }
                },
             )
        }).catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? '放弃下架'
                : '停留在当前页面'
            })
          });
      },
      async getShopList(){       // 获取个人信息列表
          const {data :goods} = await this.$http.get("shopList"); // 访问后台  
          this.goods = goods.goods;
      },
      // 页面跳转
      personal(){
          this.$router.push('/personal')
      },
      shop(){
          this.$router.push('/shop')
      },
      follow(){
          this.$router.push('/follow')
      },
      home(){
          this.$router.push('/home')
      },
      order(){
          this.$router.push('/order')
      },
      shopManage(){
          this.$router.push('/shopManage')
      },
    },
}
</script>
<style lang = 'less' scoped>
// 布局器样式
.home-container{
    height: 100%;
}
// 头样式
.el-header {
    background-color: #545c64;
    display: flex;
    /* justify-content: space-between;  // 左右贴边 */
    padding-left: 0%;   // 左边界
    align-items: center;
    color:#fff;
    font-size: 20px;
    div{
        display: flex;
        align-items: center;
        span{
            margin-left: 15px;
        }
    }   
}
/* .el-button{
    position: absolute;
    right:10px;
} */
// 主体样式
.el-main {
    background-color: #eaedf1;
}
img{
    width: 55px;
    height: 55px;
}
// 侧边栏
.el-menu{
    height: 100%;
    overflow-y: auto !important;
    text-align: left;
}
// 主界面
.el-main {
    background-color: #E9EEF3;
    color: #333;
  }
  // 表格界面
.el-table{
    margin-top: 40px;
  }
</style>